<script setup lang="ts" name="Count">
  import {ref} from "vue";
  import {useCount} from "@/store/count";
const countStore = useCount()
//一下两种方式都可以拿到state中的数据
  // console.log(countStore.sum)
  // console.log(countStore.$state.sum)
  let  n = ref(1)
  function addSUm (){
    countStore.sum += n.value
  }
  function minusSum (){
    countStore.sum -=  n.value
  }
</script>

<template>
 <div class="count">
   <h2>当前求和为：{{countStore.sum}}</h2>
   <select name="" id="" v-model.number="n">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
   </select>
   <button @click="addSUm">加</button>
   <button @click="minusSum">减</button>
 </div>
</template>

<style scoped>
  .count{
    background: skyblue;
    padding: 20px;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    select,button{
      height: 25px;
      margin: 0 5px;
    }
  }
</style>